<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成员工作分析</title>
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/memberWorkAnalysis.css">
    <link rel="stylesheet" href="../css/element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../css/element-ui/lib/index.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/echarts.js"></script>
</head>
<body>
    <div id="app">
        <div class="title">
            <h3>成员工作分析</h3>
        </div>
        <div class="tabData">
            <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'num', order: 'descending'}"
                :header-cell-style="{background:'#f4f3f9'}">
                <el-table-column prop="name" label="人员名称">
                </el-table-column>
                <el-table-column prop="department" label="所属部门">
                </el-table-column>
                <el-table-column prop="telephone" label="电话">
                </el-table-column>
                <el-table-column prop="num" label="负责泵房数" sortable>
                    <!-- <template slot-scope="scope">
                        <div style="height: 40px;width:100px" :ref="'echarts'+scope.row.id"></div>
                    </template> -->
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
        </div>

    </div>
</body>

</html>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                currentPage: 1,
            }
        },
        created() {},
        mounted() {
            this.getDataDomTableData()
            this.getEcharts()
        },
        updated() {},
        watch: {},
        methods: {
            // 获取表格数据
            getDataDomTableData() {
                axios.get("../json/memberWorkAnalysis.json").then(res => {
                    console.log(res);
                    this.tableData = res.data.result.tableData
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            getEcharts() {
                setTimeout(_ => {
                    this.tableData.forEach(e => {
                        let myChart = echarts.init(this.$refs['echarts' + e.id]);
                        myChart.setOption({
                            grid: {
                                left: "0",
                                top: "0",
                                right: "0",
                                bottom: "0",
                                containLabel: true,
                            },
                            xAxis: {
                                type: 'category',
                                //不显示x轴线
                                show: false,

                            },
                            yAxis: {
                                type: 'value',
                                show: false,
                            },
                            series: [{
                                data: e.num,
                                type: 'bar',
                                smooth: true,
                                symbol: 'none',
                            }]

                        });
                        window.addEventListener("resize", () => {
                            myChart.resize();
                        });
                    })
                }, 100)
            }
        }
    })
</script>